<!--折线图-->
<template>
  <div :class="className" :style="{height:height,width:width}">{{ ycLineRankingQueryResult }}</div>
</template>

<script>
  import echarts from 'echarts'
  require('echarts/theme/macarons') // echarts theme
  import resize from './../mixins/resize'
  import {listYcLineRanking} from "../../../api/dashboard/ycbar";

  const animationDuration = 3000
  var wugucheng = [];
  var yangqing = [];
  var xuecha = [];
  var liumaoyuan = [];
  var luopangyuan = [];


  export default {
    mixins: [resize],
    props: {
      ycLineRankingQueryResult:{
        type: Object,
      },
      className: {
        type: String,
        default: 'chart'
      },
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: '450px'
      },
      autoResize: {
        type: Boolean,
        default: true
      },
    },
    data() {
      return {
        dataResult:{
          indeId:null,
          dataDimension:null,
        },
        chart: null,
        data:{},
        MapList:[],
        rows:[],
        month:[],
        orgName:  ['刘峁塬采油作业区','薛岔采油作业区','杨青采油作业区','罗庞塬采油作业区','五谷城采油作业区'],

      }
    },
    mounted() {
      this.$nextTick(() => {
        this.initChart()
      })
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      this.chart.dispose()
      this.chart = null
    },
    created() {

    },
    clearLine(){
      this.chart.clear();
      this.chart.setOption(this.chart, true);
    },

    watch: {
      ycLineRankingQueryResult: {
        handler(newValue) {
          console.log("watch: 监听到的ycLineRankingQueryResult的newValue数据如下"+newValue)
          console.log(newValue)
          this.emptyChart();
          this.getLineRankingList(newValue);
        },
        deep: true
      }
    },

    methods: {
      async getLineRankingList(newValue){
        this.loading = true;
        this.dataResult.indeId = newValue.indeId;
        // console.log("yclineRanking中dataResult的数据:" );
        // console.log(this.dataResult.indeId)
        // console.log(this.dataResult.dataDimension)
        for(let i = 0; i < newValue.dataDimension.length; i++){
          this.dataResult.dataDimension = newValue.dataDimension[i];
          await listYcLineRanking(this.dataResult).then(response =>{
            this.MapList = response.rows;
            console.log("listYcLineRanking油厂折线图数据：" , this.MapList);// 确认数据有获取到
            console.log(this.MapList)
            let MapList = this.MapList;
            if (MapList) {
              let obj = eval(MapList);
              this.month.push(MapList[0].dataDimension + "月")
              for (let k = 0; k < obj.length; k++) {
                console.log("                (MapList[k]['ycOrg'].orgName",      MapList[k]['ycOrg'].orgName)
                switch (MapList[k]['ycOrg'].orgName){
                  case '五谷城采油作业区':
                    wugucheng.push(MapList[k].ranking)
                    break;
                  case '杨青采油作业区':
                    yangqing.push(MapList[k].ranking)
                    break;
                  case '薛岔采油作业区':
                    xuecha.push(MapList[k].ranking)
                    break;
                  case '刘峁塬采油作业区':
                    liumaoyuan.push(MapList[k].ranking)
                    break;
                  case '罗庞塬采油作业区':
                    luopangyuan.push(MapList[k].ranking)
                    break;
                }
              }
            }
          })
          console.log("五谷城采油作业区-----------------------",wugucheng)
          console.log("杨青采油作业区-----------------------",yangqing)
          console.log("薛岔采油作业区-----------------------",xuecha)
          console.log("刘峁塬采油作业区-----------------------",liumaoyuan)
          console.log("罗庞塬采油作业区-----------------------",luopangyuan)

        }
        console.log("月份--------------------", this.month)
        var option = {
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: this.orgName,
          },
          toolbox: {
            show: true,
            feature: {
              dataZoom: {
                yAxisIndex: 'none'
              },
              // magicType: { type: ['line', 'bar'] },
              restore: {},
              saveAsImage: {}
            }
          },
          xAxis: [
            {
              type: 'category',
              axisLine: {
                show: true,
              },
              boundaryGap: false,
              data: this.month,
            },
          ],
          yAxis: [
            {
              type: 'value',
              name:'排名',
              inverse:true,
              min: 1,
              max: 5,
              splitNumber: 4,
              axisLabel: {
                show: true,
                margin: 20,
                formatter: '{value}',
              },
            },
          ],
          series: [
            {
              name: '五谷城采油作业区',
              type: 'line',
              data: wugucheng,
              smooth: false
            },
            {
              name: '薛岔采油作业区',
              type: 'line',
              data: xuecha,
              smooth: false
              },
            {
              name: '杨青采油作业区',
              type: 'line',
              data: yangqing,
              smooth: false
            },
            {
              name: '刘峁塬采油作业区',
              type: 'line',
              data: liumaoyuan,
              smooth: false
            },
            {
              name: '罗庞塬采油作业区',
              type: 'line',
              data: luopangyuan,
              smooth: false
            },
          ],
        };
        this.chart.setOption(option);

      },
      initChart() {
        this.chart = echarts.init(this.$el, 'macarons')
        this.chart.setOption({
          toolbox: {
            show: true,
            feature: {
              dataZoom: {
                yAxisIndex: 'none'
              },
              restore: {},
              saveAsImage: {}
            }
          },
          grid: {
            left: 10,
            right: 10,
            bottom: 20,
            top: 30,
            containLabel: true
          },
          tooltip: {
            trigger: 'axis',
            padding: [5, 10]
          },
          xAxis: [
            {
              type: 'category',
              axisLine: {
                show: true,
              },
              boundaryGap: false,
              data: []
            },
          ],
          yAxis: [
            {
              type: 'value',
              // name:'排名',
              inverse:true,
              min: 1,
              max: 5,
              splitNumber: 4,
              axisLabel: {
                show: true,
                margin: 20,
                formatter: '{value}',
              },
            },
          ],
        })
      },
      emptyChart() {
        wugucheng = [];
        yangqing = [];
        xuecha = [];
        liumaoyuan = [];
        luopangyuan = [];
        this.month = [];
        this.chart.clear();
        this.chart.setOption({
          toolbox: {
            show: true,
            feature: {
              dataZoom: {
                yAxisIndex: 'none'
              },
              restore: {},
              saveAsImage: {}
            }
          },
          grid: {
            left: 10,
            right: 10,
            bottom: 20,
            top: 30,
            containLabel: true
          },
          tooltip: {
            trigger: 'axis',
            padding: [5, 10]
          },
          xAxis: [
            {
              type: 'category',
              axisLine: {
                show: true,
              },
              boundaryGap: false,
              data: []
            },
          ],
          yAxis: [
            {
              type: 'value',
              // name:'排名',
              inverse:true,
              min: 1,
              max: 5,
              splitNumber: 4,
              axisLabel: {
                show: true,
                margin: 20,
                formatter: '{value}',
              },
            },
          ],

        },true)
      }
    }
  }
</script>
